<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="ajax.js"></script>
<script>
	Date.prototype.shortFormat = function(){
		return (this.getMonth() + 1) + "/" + this.getDate() + "/" + this.getFullYear();
	}
	
	function Blog(body,date,image){
		this.body = body;
		this.date = date;
		this.image = image;
	}
	
	Blog.prototype.toString = function(){
		return "["+this.date.shortFormat()+"]"+this.body;
	};
	
	
	Blog.prototype.toHTML = function(highlight) {
        // Use a gray background as a highlight, if specified
        var blogHTML = "";
        blogHTML += highlight ? "<p style='background-color:#EEEEEE'>" : "<p>";

        // Generate the formatted blog HTML code
        if (this.image) {
          blogHTML += "<strong>" + this.date.shortFormat() + "</strong><br /><table><tr><td><img src='" +
            this.image + "'/></td><td style='vertical-align:top'>" + this.body + "</td></tr></table><em>" +
            this.signature + "</em></p>";
        }
        else {
          blogHTML += "<strong>" + this.date.shortFormat() + "</strong><br />" + this.body +
            "<br /><em>" + this.signature + "</em></p>";
        }
        return blogHTML;
     };
     
    Blog.prototype.containsText = function(text){
    	return (this.body.toLowerCase().indexOf(text.toLowerCase()) != -1);
    }
    
    Blog.prototype.signature = "by Puzzler Ruby";

    Blog.blogSorter = function(blog1, blog2) {
        return blog2.date - blog1.date;
    };
    
    var blog = new Array();
    
    function showBlog(numEntries){
    	blog.sort(Blog.blogSorter);
    	
    	if(!numEntries){
    		numEntries = blog.length;
    	}
    	
    	var i=0;
    	var blogListHTML= "";
    	while(i<numEntries&&i<blog.length){
    		blogListHTML += blog[i].toHTML(i%2==0);
    		i++;
    	}
    	document.getElementById("blog").innerHTML=decodeURIComponent(blogListHTML);
    }
    
    var ajaxReq = new AjaxRequest();
    function loadBlog(){
    	document.getElementById("blog").innerHTML="<img src='../images/wait.gif' />";
    	ajaxReq.send("get","blog.xml",requestHandle);
    }
    
    
    function requestHandle(){
    	if(ajaxReq.getReadyState()==4 && ajaxReq.getStatus() == 200){
    		var xmlData = ajaxReq.getResponseXML().getElementsByTagName("blog")[0];
    		Blog.prototype.signature = "~"+getText(xmlData.getElementsByTagName("author")[0]);
    		
    		var entries = xmlData.getElementsByTagName("entry");
    		for(var i = 0;i< entries.length;i++){
    			blog.push(new Blog(getText(entries[i].getElementsByTagName("body")[0]),
    					new Date(getText(entries[i].getElementsByTagName("date")[0])),
    					getText(entries[i].getElementsByTagName("image")[0])
    			));
    		}
    		showBlog(3);
    		document.getElementById("search").disabled=false;
    		document.getElementById("showall").disabled=false;
    		document.getElementById("random").disabled=false;
    	}
    	
    	
    }
    
    function getText(elem){
    	var text = "";
    	if(elem){
    		if(elem.childNodes){
    			for(var i=0;i<elem.childNodes.length;i++){
    				var child = elem.childNodes[i];
    				if(child.nodeValue){
    					text += child.nodeValue;
    				}else{
    					if(child.childNodes){
    						if(child.childNodes[0].nodeValue)
    							text += child.childNodes[0].nodeValue;
    					}
    				}
    			}
    		}
    	}
    	return text;
    }
    
    function randomView(){
    	var num = Math.floor(Math.random()*blog.length);
    	alert(blog[num]);
    }
    
    function searchBlog(){
    	var search = document.getElementById("searchtext").value;
    	for(var i =0;i<blog.length;i++){
    		if(blog[i].containsText(search)){
    			alert(blog[i]);
    			break;
    		}
    	}
    	
    	if(i==blog.length){
    		alert("not match ");
    	}
    }

    window.onload = function(event){
    	loadBlog();
    }
</script>
</head>
<body >
	<h3>YouCube - The Blog for Cube Puzzlers</h3>
	<img src="../images/cube.png" alt="You Cube"/>
	<input type="button" id="search" value="Search the Blog" onclick="searchBlog();" disabled="disabled"/>
    <input type="text" id="searchtext" name="searchtext" value="" /> 
	<div id="blog"></div>
	<input type="button" id="showall" value="Show all Blog Entries" onclick="showBlog();" disabled="disabled"/>	
	<input type="button" id="random"  value="random view" onclick="randomView()" disabled="disabled"/>
</body>
</html>